<div style="width: 100%;position: relative;padding-bottom: 40px">
    <div>
        <h1 *ngIf="!withtree" mat-dialog-title style="display:inline-block; cursor:move; padding-top: 15px" mat-dialog-draggable>
            {{'device.tag-property-title' | translate}}
        </h1>
        <h1 *ngIf="withtree" mat-dialog-title style="display:inline-block; cursor:move; padding-top: 15px" mat-dialog-draggable>
            {{'device.opctag-property-title' | translate}}
        </h1>
        <mat-icon (click)="onNoClick()" style="float:right;cursor:pointer;color:gray;position: relative; top: 10px; right: 0px">clear</mat-icon>
    </div>
    <div style="max-height: 540px; overflow-y: auto; overflow-x: hidden; padding-top: 5px;" *ngIf="!withtree">
        <div style="display: block;">
            <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                <span>{{'device.tag-property-device' | translate}}</span>
                <mat-select [(value)]="data.device.name" style="width: 350px" [disabled]="true">
                    <mat-option *ngFor="let device of devicesValue()" [value]="device.name">
                        {{ device.name }}
                    </mat-option>
                </mat-select>
            </div>
            <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                <span>{{'device.tag-property-name' | translate}}</span>
                <input [(ngModel)]="data.tag.name" style="width: 350px" type="text" (input)="onCheckValue($event)">
            </div>
            <div *ngIf="isSiemensS7()">
                <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                    <span>{{'device.tag-property-type' | translate}}</span>
                    <mat-select [(value)]="data.tag.type" style="width: 350px">
                        <mat-option *ngFor="let type of tagType | enumToArray" [value]="type.key">
                            {{ type.value }}
                        </mat-option>
                    </mat-select>
                </div>
                <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                    <span>{{'device.tag-property-address' | translate}}</span>
                    <input [(ngModel)]="data.tag.address" style="width: 350px" type="text">
                </div>
                <div class="my-form-field" style="display: inline-block;margin-bottom: 10px;padding-right: 10px;">
                    <span>{{'device.tag-property-min' | translate}}</span>
                    <input numberOnly [(ngModel)]="data.tag.min" style="width: 80px" type="text">
                </div>
                <div class="my-form-field" style="display: inline-block;margin-bottom: 10px;padding-right: 10px;">
                    <span>{{'device.tag-property-max' | translate}}</span>
                    <input numberOnly [(ngModel)]="data.tag.max" style="width: 80px" type="text">
                </div>
            </div>
            <div *ngIf="isModbus()">
                <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                    <span>{{'device.tag-property-type' | translate}}</span>
                    <mat-select [(value)]="data.tag.memaddress" style="width: 350px" #memaddress (selectionChange)="checkMemAddress(data.tag.memaddress)">
                        <mat-option *ngFor="let type of memAddress | enumToArray" [value]="type.value">
                            {{ type.key }}
                        </mat-option>
                    </mat-select>
                </div>                
                <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                    <span>{{'device.tag-property-type' | translate}}</span>
                    <mat-select [(value)]="data.tag.type" style="width: 350px" [disabled]="!memaddress.value || memaddress.value == '000000' || memaddress.value == '100000'">
                        <mat-option *ngFor="let type of tagType | enumToArray" [value]="type.key">
                            {{ type.value }}
                        </mat-option>
                    </mat-select>
                </div>
                <div class="my-form-field" style="display: block;margin-bottom: 10px;">
                    <span>{{'device.tag-property-address-offset' | translate}}</span>
                    <input numberOnly [(ngModel)]="data.tag.address" style="width: 350px" type="text" [disabled]="!memaddress.value">
                </div>
                <!-- <div class="my-form-field" style="display: inline-block;margin-bottom: 10px;padding-right: 10px;">
                    <span>{{'device.tag-property-min' | translate}}</span>
                    <input numberOnly [(ngModel)]="data.tag.min" style="width: 80px" type="text">
                </div>
                <div class="my-form-field" style="display: inline-block;margin-bottom: 10px;padding-right: 10px;">
                    <span>{{'device.tag-property-max' | translate}}</span>
                    <input numberOnly [(ngModel)]="data.tag.max" style="width: 80px" type="text">
                </div> -->
            </div>
            <div class="error" *ngIf="error">
                <span>{{error}}</span>
            </div>
        </div>
    </div>

    <div style="overflow-y: auto; overflow-x: hidden; padding-top: 5px;" [hidden]="!withtree">
        <ngx-treetable #treetable [config]="config" (expand)="queryNext($event)"></ngx-treetable>
    </div>

    <div mat-dialog-actions style="display: inline-block; position: absolute; bottom: 10px; right: 10px">
        <button mat-raised-button (click)="onNoClick()">{{'dlg.cancel' | translate}}</button>
        <button mat-raised-button [disabled]="!isValidate()" color="primary" (click)="onOkClick()" [mat-dialog-close]="data" cdkFocusInitial>{{'dlg.ok' | translate}}</button>
    </div>
</div>